import React, { useContext } from 'react';
import { Button, Icon } from 'antd';
import SuperSearchContext from './context';

const Commonly = props => {
    const { children } = props;
    const { collapsed, setCollapsed, onSearch } = useContext(SuperSearchContext);

    const toggle = () => {
        const result = !collapsed;
        setCollapsed(result);
    };

    const displayIcon = collapsed ? (
        <React.Fragment>
            高级搜索
            <Icon type="caret-down" style={{ marginLeft: 5 }} />
        </React.Fragment>
    ) : (
        <React.Fragment>
            收起
            <Icon type="caret-up" style={{ marginLeft: 5 }} />
        </React.Fragment>
    );
    return (
        <div className="search-commonly">
            {children}
            {onSearch ? (
                <Button type="primary" onClick={() => onSearch()}>
                    搜索
                </Button>
            ) : null}
            <Button type="link" className="search-commonly-more" onClick={toggle}>
                {displayIcon}
            </Button>
        </div>
    );
};

Commonly.displayName = 'SuperSearch.Commonly';

export default Commonly;
